<template>
	<view style="background-image: linear-gradient(to bottom, #d9d9d9 0%, black 100%); height: 100%;">
	<!-- <view> -->

		<!-- 状态栏 -->
		<u-navbar :is-back="true" title=" " :background="sc.navBackground" :border-bottom="false">
			<view class="slot-wrap">
				<!-- 搜索框 -->
				<u-search class="search" placeholder="剑未配妥，出门已是江湖" v-model="sc.sckey" :show-action="sc.showAction"
					:action-style="sc.youStyle" :animation="sc.animation" :margin="sc.margin"
					@blur="scMaask=false" @focus="scMaask=true" @custom="u_sc_go" @search="u_sc_go"
					@change="u_sc_lianxiang"></u-search>
			</view>
		</u-navbar>



		<view class="content" style="margin-top: 20rpx;">
			<!-- 正文内容 -->
		</view>



		<!-- 搜索框遮罩层 -->
		<u-mask :show="scMaask" :duration="400" :zoom="false" :custom-style="{background: 'rgba(0, 0, 0, 0.7)'}"
			z-index="979" :mask-click-able="true" @click="sc_mask">

			<!-- 遮罩层显示内容 -->
			<view class="sc-pop" :style="{marginTop: customBarH + 10 + 'px'}" style="z-index: 981;">
				<!-- 搜索记录&热门搜索 -->
				<view class="" v-if="!sc_lianx.length>0">
					<view class="u-font-xl" v-if="searchHistory.length>0">搜索历史:</view>
					<view class="u-font-sm" v-for="(item,index) in searchHistory" :key="index">
						<u-tag @click="u_sc_go(item)" class="tag" :text="item" mode="dark" shape="circle" type="info" />
					</view>
					<view class="u-font-xl">热门搜索:</view>
					<view class="u-font-sm">
						<u-tag class="tag" @click="u_sc_go('item')" text="签的边框颜色" mode="dark" shape="circle"
							type="info" />
					</view>
				</view>
				<!-- 搜索联想 -->
				<u-cell-group :border="false" v-show="sc_lianx">
					<view v-for="(item,index) in sc_lianx" :key="index">
						<u-cell-item icon="tags-fill" @click='u_sc_go' :index="item.title" :title="item.title"
							:icon-style="{color:'#fff'}" :title-style="{color:'#fff'}"></u-cell-item>
					</view>
				</u-cell-group>
			</view>
		</u-mask>



	</view>
</template>

<script>
	export default {

		data() {
			return {
				statusBarH: this.StatusBar,
				customBarH: this.CustomBar,
				//搜索下拉框和这招是否显示
				scMaask: false,
				// 搜素框设置
				sc: {
					// 导航栏背景颜色
					navBackground: 'background-color:rgba(220,38,38,0.2)',
					//搜索框的的绑定值
					sckey: '',
					showAction: true,
					animation: true,
					margin: "0px 24rpx",
					youStyle: {
						color: "rgb(242, 242, 242)"
					}
				},
				// 联网返回的搜素联想
				sc_lianx: [],
				// 本地搜索记录
				searchHistory: [],
			}
		},
		onLoad(o) {
			this.sc.sckey = o.title
		},
		onShow() {
			this.searchHistory = uni.getStorageSync("searchHistory")
		},
		methods: {

			// 搜索框远程获取联想
			u_sc_lianxiang(e) {
				if (e.length > 0) {
					console.log("搜索框输入的内容是:" + e)
					this.sc_lianx = [{
						title: "龙腾虎跃"
					}, {
						title: "龙争虎斗ssss"
					}, {
						title: "亢龙有悔是利空打击"
					}]
				} else {
					this.sc_lianx = []
				}
			},
			// 去搜索
			u_sc_go(e) {
				if (e.length > 0) {
					console.log("要搜索的内容:" + e)
					// TODO:联网搜索结果

					// 添加到搜索记录--最多8条
					uni.getStorage({
						key: 'searchHistory',
						success(res) {
							let history = res.data
							let index = history.findIndex(fruit => fruit == e)
							if (index > -1) { //如果存在则删除并重新写入
								history.splice(index, 1)
								history.unshift(e)
							} else {
								history.unshift(e)
							}
							if (history.length > 8) {
								history.pop()
							}
							uni.setStorage({
								key: 'searchHistory',
								data: history,
							})
						},
						fail() {
							let history = []
							history.push(e)
							uni.setStorage({
								key: "searchHistory",
								data: history
							})
						}
					}) //添加记录结束
				}
			},
			// 点击搜索框遮罩层
			sc_mask() {
				this.scMaask = false
			},

		},
		created() {
			
		}

	}
</script>

<style lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1
			/* 如果您想让slot内容与导航栏左右有空隙 */
			// padding: 0 30rpx;
	}

	.search {
		z-index: 999;
	}

	.sc-pop {
		color: #FFFFFF;
		// background-color: #007AFF;
		width: 100%;
		// z-index: 999;

		.u-font-xl {
			margin-top: 10rpx;
		}

		.u-font-sm {
			margin-top: 10px;
			display: inline-flex;
			flex-direction: row;
			flex-wrap: wrap;

			.tag {
				margin: 6rpx 10rpx;
			}
		}
	}
</style>
